<script setup lang="ts">
import type {ConfigProviderThemeVars} from 'vant';
import {useRouter} from "vue-router";

const themeVars: ConfigProviderThemeVars = {
    navBarBackground: '#CEAFF8',
    navBarIconColor: 'white'
};
const onClickLeft = () => history.back();

// 接收父组件传过来的教师详情数组、
const props = defineProps({
        teacherInfo: {
            type: [Object, String]
        }
    }
)
// console.log(props)
setTimeout(()=>{
    console.log(props.teacherInfo)
},2000)
let baseUrl = 'http://192.168.5.120:8090'

const teacherArticle = useRouter()

// 跳转到该老师写的文章
const toArticle=function (id){
    teacherArticle.push({
        path:'/searchText',
        query:{id:id}
    })
    // console.log(id)
}
</script>

<template>
    <van-config-provider :theme-vars="themeVars">
        <van-nav-bar
                :border=false
                :fixed=true
                :placeholder=true
                left-arrow
                @click-left="onClickLeft"
        />
    </van-config-provider>
    <div class="blue"></div>
    <div class="white">
        <div class="pic">
            <img :src="baseUrl+props.teacherInfo.avatar"
                 alt="头像">
        </div>
        <h3 class="name">{{ props.teacherInfo.name }}</h3>
        <div class="ability">
            <div v-for="item in props.teacherInfo.labels" :key="item.labelId">{{item.label}}</div>
        </div>
        <div class="articleNum" @click="toArticle(props.teacherInfo.userId)">
            <van-icon name="description-o"  size="30"/>
            文章{{props.teacherInfo.articleNumber}}
        </div>
    </div>
</template>

<style scoped lang="less">
.blue {
  position: relative;
  background-color: #CEAFF8;
  width: 100%;
  height: 20vh;
}

.white {
  padding: 3vh;
  box-sizing: border-box;
  height: 25vh;
  width: 94%;
  margin: 15px auto;
  position: absolute;
  top: 5vh;
  left: 3%;
  background-color: white;
  border-radius: 10px;
.articleNum {
    position: absolute;
    top: 12%;
    right: 2%;
}
  .pic {
    width: 21%;
    margin: 0 auto;
    height: 8vh;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .name {
    text-align: center;
    width: 50%;
    margin: 10px auto;
  }

  .ability {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    div {
      color: #7246c5;
      padding: 5px;
      box-sizing: border-box;
      background-color: #ECE2F8;
      border-radius: 6px;
    }
  }
}
</style>